<template>
  <div class="photoCard">
    <img class="photoImg" :src="getImageUrl(photo.imgurl)" alt="" />
    
    <div class="photoBg"></div>
    <div class="photoLike">
      <span class="iconfont icon-aixin"></span>
      <span class="likeData">{{ photo.like }}</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { label, bgColor } from "@/utils/data"

// 解析地址
const getImageUrl = (name) => {
  return new URL(`../assets/images/${name}.jpg`, import.meta.url).href
}

const props = defineProps({
  width: {
    default: '288px',
    type: String,
  },
  photo: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>

<style lang="less" scoped>
.photoCard {
  position: relative;
  cursor: pointer;
  .photoImg {
    width: 100%;
  }

  .photoBg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: .3s;
  }

  .photoLike {
    position: absolute;
    top: @padding-8;
    left: @padding-8;
    background: rgba(255, 255, 255, .8);
    border-radius: 20px;
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: .3s;
    .icon-aixin {
      color: @gray-3;
      margin-right: @padding-4;
    }

    .likeData {
      color: @gray-1;
    }
  }

  &:hover {
    .photoBg {
      opacity: 1;
    }
    .photoLike {
      opacity: 1;
    }
  }


}
</style>